<!-- 歌手管理 -->
<script setup lang="ts">
defineOptions({
  name: "Artist",
  inheritAttrs: false,
});
import {
  addArtist,
  deleteArtists,
  downloadTemplateApi,
  exportArtist,
  getArtistForm,
  getArtistPage,
  updateArtist,
} from "@/api/application/artist";
import {
  ArtistForm,
  ArtistPageVO,
  ArtistQuery,
} from "@/api/application/artist/types";
import { axiosUpload, getPresignedUrl, updateMinioFile } from "@/api/minio";
import { UploadFileDto } from "@/api/minio/type";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import {
  genFileId,
  type UploadFile,
  type UploadFiles,
  type UploadInstance,
  type UploadProps,
  type UploadRawFile,
} from "element-plus";
import { pinyin } from "pinyin-pro";
// import { ElForm, ElMessage, genFileId } from "element-plus";

import { getDictOptions } from "@/api/dict";
import { PictorialEnum } from "@/api/picture/type";
import { country } from "@/const";
import axios, { AxiosProgressEvent, AxiosResponse } from "axios";

const queryFormRef = ref(ElForm); // 查询表单
const artistFormRef = ref(ElForm); // 歌手表单
const uploadRef = ref<UploadInstance>(); // 上传组件

const uploadUrl = ref<string>();
let uploadAvatarRef = ref(null);

const loading = ref(false); //  加载状态
const removeIds = ref([]); // 删除歌手ID集合 用于批量删除
const queryParams = reactive<ArtistQuery>({
  pageNum: 1,
  pageSize: 10,
});
const dateTimeRange = ref("");
const total = ref(0); // 数据总数
const pageData = ref<ArtistPageVO[]>(); // 歌手分页数据
const deptList = ref<OptionType[]>(); // 部门下拉数据源
const regionList = ref<OptionType[]>(); // 角色下拉数据源

watch(dateTimeRange, (newVal) => {
  if (newVal) {
    queryParams.startTime = newVal[0];
    queryParams.endTime = newVal[1];
  }
});

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "artist-form",
  width: 800,
  title: "",
});

// 歌手表单数据
const formData = reactive<ArtistForm>({
  birthday: "",
  pictorialList: [],
  gender: 0,
  introduce: "",
  weight: null,
  pic: [],
  blood: "",
  artistCode: "",
  birthPlace: "",
  name: "",
  region: "",
  height: null,
  status: 1,
  pinyinName: "",
});

// 歌手导入数据
const importData = reactive({
  file: undefined,
  fileList: [],
});

// 校验规则
const rules = reactive({
  name: [{ required: true, message: "歌手名不能为空", trigger: "blur" }],
  // email: [
  //   {
  //     pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
  //     message: "请输入正确的邮箱地址",
  //     trigger: "blur",
  //   },
  // ],
  // mobile: [
  //   {
  //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  //     message: "请输入正确的手机号码",
  //     trigger: "blur",
  //   },
  // ],
});

/** 查询 */
async function handleQuery() {
  loading.value = true;
  try {
    const data = await getArtistPage(queryParams);

    pageData.value = data.list;
    total.value = data.total;
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  dateTimeRange.value = "";
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行选中 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 加载地区标签下拉数据源 */
async function loadRegionOptions() {
  regionList.value = await getDictOptions("region");
}

/**
 * 打开弹窗
 *
 * @param type 弹窗类型  歌手表单：artist-form | 歌手导入：artist-import
 * @param id 歌手ID
 */
async function openDialog(type: string, id?: number) {
  dialog.visible = true;
  dialog.type = type;

  if (dialog.type === "artist-form") {
    // 歌手表单弹窗
    await loadRegionOptions();
    if (id) {
      dialog.title = "修改歌手";
      const data = await getArtistForm(id);
      Object.assign(formData, { ...data });
    } else {
      dialog.title = "新增歌手";
    }
  } else if (dialog.type === "artist-import") {
    // 歌手导入弹窗
    dialog.title = "导入歌手";
    dialog.width = 600;
  }
}

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  歌手表单：artist-form | 歌手导入：artist-import
 */
function closeDialog() {
  dialog.visible = false;
  if (dialog.type === "artist-form") {
    artistFormRef.value.resetFields();
    artistFormRef.value.clearValidate();

    formData.id = undefined;
    formData.status = 1;
  } else if (dialog.type === "artist-import") {
    importData.file = undefined;
    importData.fileList = [];
  }
}

/** 删除歌手 */
function handleDelete(id?: number) {
  const artistIds = [id || removeIds.value].join(",");
  if (!artistIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除歌手?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async function () {
    try {
      await deleteArtists(artistIds);
      ElMessage.success("删除成功");
    } catch (error) {
    } finally {
      resetQuery();
    }
  });
}

/** 下载导入模板 */
async function downloadTemplate() {
  try {
    const response = await downloadTemplateApi();

    const fileData = response.data;
    const fileName = decodeURI(
      response.headers["content-disposition"].split(";")[1].split("=")[1]
    );
    const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"; // 'application/vnd.ms-excel'
    const zipFileType = "application/zip";
    const blob = new Blob([fileData], { type: fileType });
    const downloadUrl = window.URL.createObjectURL(blob);

    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {}
}

/** Excel文件 Change */
function handleFileChange(file: any) {
  importData.file = file.raw;
  console.log(importData.file);
}

/** Excel文件 Exceed  */
function handleFileExceed(files: any) {
  uploadRef.value!.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
  importData.file = file;
}

/** 导出歌手 */
async function handleExport() {
  const data = await exportArtist(queryParams);
  console.log(data);

  saveFile(data);
}
/** 导出歌手 */
function saveFile(fileBinary: ArrayBuffer, filename = "歌手列表-test") {
  const decoder = new TextDecoder("utf-8");
  const text = decoder.decode(fileBinary);

  // const fileBinary = Buffer.from(fileBinary, 'binary');
  const blob = new Blob([fileBinary], { type: "application/vnd.ms-excel" });

  const href = URL.createObjectURL(blob); // 创建新的URL表示指定的blob对象
  const a = document.createElement("a"); // 创建a标签
  a.style.display = "none";
  a.href = href; // 指定下载链接
  a.download = `${filename}.xlsx`; // 指定下载文件名
  a.click(); // 触发下载
  URL.revokeObjectURL(a.href); // 释放URL对象
}

onMounted(() => {
  handleQuery();
});

const beforeImageUpload: UploadProps["beforeUpload"] = async (
  rawFile: UploadRawFile
) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }

  const o = Object.assign({}, { ...rawFile });
  const form: UploadFileDto = {
    name: "",
    uid: 0,
    status: "success",
    size: 0,
    lastModified: 0,
    type: "",
    webkitRelativePath: "",
  };
  form.uid = rawFile.uid;
  form.lastModified = rawFile.lastModified;
  form.size = rawFile.size;
  form.type = rawFile.type;
  form.name = rawFile.name;
  form.isPublic = true;
  console.log(form);
  const url = await getPresignedUrl(form);

  uploadUrl.value = url;
  return true;
};

/**
 * 选择头像
 * @param uploadFile
 */
const avatarFileChange: UploadProps["onChange"] = async (
  uploadFile: UploadFile
) => {
  uploadFile.url = URL.createObjectURL(uploadFile.raw!);
  console.log(uploadFile);
  let form: UploadFileDto = uploadFile as UploadFileDto;
  form.isPublic = true;
  formData.pic = [form];
};

/**
 * 选择照片墙
 * @param uploadFile
 */
const pictorialFileChange: UploadProps["onChange"] = async (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  uploadFile.url = URL.createObjectURL(uploadFile.raw!);
  let forms = uploadFiles as UploadFileDto[];
  formData.pictorialList = [...forms];
  console.log(uploadFile, uploadFiles, formData);
};

///上传头像
const handleAvatarSuccess: UploadProps["onSuccess"] = async (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  const remoteUrl = response.config.url.split("?")[0];
  let form = uploadFile as UploadFileDto;
  form.url = remoteUrl;
  form.isPublic = true;
  await updateMinioFile(form);
  formData.pic = [form];
};
/**
 * 上传背景图
 * @param response
 * @param uploadFile
 * @param uploadFiles
 */
const handlePictorialSuccess: UploadProps["onSuccess"] = async (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  const remoteUrl = (uploadFile.response as any).config.url.split("?")[0];
  await updateMinioFile({
    uid: uploadFile.uid,
    status: uploadFile.status,
    percentage: uploadFile.percentage,
    name: uploadFile.name,
    url: remoteUrl,
    size: 0,
    lastModified: 0,
    type: "",
    webkitRelativePath: "",
  });
  // formData.pic = URL.createObjectURL(uploadFile.raw!);
  console.log("handlePictorialSuccess", uploadFile, formData.pictorialList);
  formData.pictorialList.forEach(
    (p: UploadFile) => (p.url = (p.response as any).config.url.split("?")[0])
  );
  // formData.pictorialList.push({
  //   name: uploadFile.name,
  //   url: response.config.url.split("?")[0]
  // })
};

/**
 * 删除照片墙
 */
const removePictorialList: UploadProps["onRemove"] = async (
  uploadFile,
  uploadFiles
) => {
  const artistId = formData.id;
  console.log(uploadFile, uploadFiles);
  try {
    // if (artistId) {
    //   const form: UploadFileDto = {};
    //   form.uid = uploadFile.uid;
    //   form.lastModified = uploadFile!.raw!.lastModified;
    //   form.size = uploadFile.size;
    //   form.type = uploadFile!.raw!.type;
    //   form.name = uploadFile.name;
    //   form.status = uploadFile.status;
    //   form.percentage = uploadFile.percentage;

    //   await removePictureFile(form);
    // } else {
    //   formData.pictorialList = [...uploadFiles];
    // }
    let forms = (uploadFiles as UploadFileDto[]).map((file) => ({
      ...file,
      isPublic: true,
    }));
    formData.pictorialList = [...forms];
    ElMessage.success("删除图片成功");
  } catch (error) {
    console.error(error);
    ElMessage.error("删除失败");
  }
};

//删除头像
async function deletePic() {
  const artistId = formData.id;
  try {
    //artistID存在-编辑状态下-删除服务器上的图片
    // if (artistId) {
    //   const form: UploadFileDto = {};
    //   form.uid = formData.pic[0].uid;
    //   form.name = formData.pic[0].name;
    //   await removePictureFile(form);
    // }
    ElMessage.success("删除头像成功");
    formData.pic = [];
  } catch (error) {
    ElMessage.error("删除失败");
  }
}

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  // dialogImageUrl.value = uploadFile.url!
  // dialogVisible.value = true
};

async function uploadAvatar() {
  const pic = formData.pic.at(0);
  let isNewAvatar: boolean | undefined = pic?.url?.startsWith("blob:");

  if (isNewAvatar) {
    const form: UploadFileDto = {
      name: "",
      uid: 0,
      status: "success",
      size: 0,
      lastModified: 0,
      type: "",
      webkitRelativePath: "",
      isPublic: true,
    };
    form.uid = pic?.raw?.uid!;
    form.lastModified = pic?.raw?.lastModified!;
    form.size = pic?.raw?.size!;
    form.type = pic?.raw?.type!;
    form.name = pic?.raw?.name!;
    const { url, fileId } = await getPresignedUrl(form);

    const res: AxiosResponse = await axios.put(url, pic?.raw, {
      headers: { "Content-Type": pic?.raw?.type },
      onUploadProgress: (e: AxiosProgressEvent) => {},
    });

    pic!.url = url.split("?")?.at(0) ?? "";
    pic!.id = fileId;
    pic!.picType = PictorialEnum.AVATAR;
  }
}

async function uploadPictrialList() {
  const { pictorialList } = formData;

  for await (const pic of pictorialList) {
    let isNew: boolean | undefined = pic?.url?.startsWith("blob:");

    if (isNew) {
      const form: UploadFileDto = {
        name: "",
        uid: 0,
        status: "success",
        size: 0,
        lastModified: 0,
        type: "",
        webkitRelativePath: "",
        isPublic: true,
      };
      form.uid = pic?.raw?.uid!;
      form.lastModified = pic?.raw?.lastModified!;
      form.size = pic?.raw?.size!;
      form.type = pic?.raw?.type!;
      form.name = pic?.raw?.name!;
      const { url, fileId } = await getPresignedUrl(form);
      const res: AxiosResponse = await axios.put(url, pic?.raw, {
        headers: { "Content-Type": pic?.raw?.type },
        onUploadProgress: (e: AxiosProgressEvent) => {},
      });

      pic!.url = url.split("?")?.at(0) ?? "";
      pic!.id = fileId;
      pic!.picType = PictorialEnum.PICTORIAL;
      console.log(pic!.url);
    }
  }

  console.log(pictorialList);
}

/** 表单提交 */
const handleSubmit = useThrottleFn(async () => {
  if (dialog.type === "artist-form") {
    artistFormRef.value.validate(async (valid: any) => {
      if (valid) {
        const artistId = formData.id;
        loading.value = true;
        try {
          formData.pinyinName = pinyin(formData.name, { toneType: "none" });
          await uploadAvatar();
          await uploadPictrialList();

          artistId
            ? await updateArtist(artistId, formData)
            : await addArtist(formData);
          ElMessage.success(`${artistId ? "修改" : "新增"}歌手成功`);

          closeDialog();
          resetQuery();
        } catch (error) {
        } finally {
          loading.value = false;
        }
      }
    });
  } else if (dialog.type === "artist-import") {
    if (!importData?.file) {
      ElMessage.warning("上传Excel文件不能为空");
      return false;
    }

    // try {
    //   await importArtist(importData?.file);
    //   ElMessage.success("导入成功");
    // } catch (error) {
    //   ElMessage.success("导入失败");
    // } finally {
    //   closeDialog();
    //   resetQuery();
    // }
  }
}, 3000);
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 歌手列表 -->
      <el-col :xs="24">
        <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="关键字" prop="keywords">
              <el-input
                v-model="queryParams.keywords"
                placeholder="歌手名/昵称/手机号"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="全部"
                clearable
                class="!w-[100px]"
              >
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间">
              <el-date-picker
                class="!w-[240px]"
                v-model="dateTimeRange"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="截止时间"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleQuery"
                ><i-ep-search />搜索</el-button
              >
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never" class="table-container">
          <template #header>
            <div class="flex justify-between">
              <div>
                <el-button
                  v-hasPerm="['sys:artist:create']"
                  type="success"
                  @click="openDialog('artist-form')"
                  ><i-ep-plus />新增</el-button
                >
                <el-button
                  v-hasPerm="['sys:artist:delete']"
                  type="danger"
                  :disabled="removeIds.length === 0"
                  @click="handleDelete()"
                  ><i-ep-delete />删除</el-button
                >
              </div>
              <!-- <div>
                <el-dropdown split-button>
                  导入
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="downloadTemplate">
                        <i-ep-download />下载模板</el-dropdown-item
                      >
                      <el-dropdown-item @click="openDialog('artist-import')">
                        <i-ep-top />导入数据</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
</el-dropdown>
<el-button class="ml-3" @click="handleExport"><template #icon><i-ep-download /></template>导出</el-button>
</div> -->
            </div>
          </template>

          <el-table
            v-loading="loading"
            :data="pageData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              key="id"
              label="编号"
              align="center"
              prop="id"
              width="100"
            />
            <el-table-column
              key="name"
              label="歌手名"
              align="center"
              prop="name"
            />
            <el-table-column
              key="code"
              label="歌手代码"
              align="center"
              prop="artistCode"
            />

            <el-table-column
              label="性别"
              width="100"
              align="center"
              prop="genderLabel"
            />

            <el-table-column
              label="出生地"
              width="120"
              align="center"
              prop="birthPlace"
            />
            <el-table-column
              label="地区"
              width="120"
              align="center"
              prop="region"
            />
            <el-table-column
              label="出生日期"
              align="center"
              prop="birthday"
              width="120"
            />
            <el-table-column
              label="血型"
              align="center"
              prop="blood"
              width="120"
            />
            <el-table-column
              label="身高"
              align="center"
              prop="height"
              width="120"
            />
            <el-table-column
              label="体重"
              align="center"
              prop="weight"
              width="120"
            />
            <el-table-column
              label="介绍"
              align="center"
              prop="introduce"
              width="120"
              show-overflow-tooltip
            />

            <el-table-column label="状态" align="center" prop="status">
              <template #default="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
                  scope.row.status == 1 ? "启用" : "禁用"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              align="center"
              prop="createTime"
              width="180"
            />
            <el-table-column label="操作" fixed="right" width="150">
              <template #default="scope">
                <el-button
                  v-hasPerm="['sys:artist:update']"
                  type="primary"
                  link
                  size="small"
                  @click="openDialog('artist-form', scope.row.id)"
                  ><i-ep-edit />编辑</el-button
                >
                <el-button
                  v-hasPerm="['sys:artist:delete']"
                  type="primary"
                  link
                  size="small"
                  @click="handleDelete(scope.row.id)"
                  ><i-ep-delete />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
      draggable
    >
      <!-- 歌手新增/编辑表单 -->
      <el-form
        v-if="dialog.type === 'artist-form'"
        ref="artistFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="歌手名" prop="name" required>
          <el-input
            v-model="formData.name"
            :readonly="!!formData.id"
            placeholder="请输入歌手名"
          />
        </el-form-item>

        <el-form-item label="头像" prop="pic">
          <div
            v-show="formData.pic[0] && formData.pic[0].url"
            class="avatar-delete-wrapper"
          >
            <img
              crossOrigin="anonymous"
              :src="formData.pic[0]?.url"
              class="avatar"
            />
            <span class="avatar-cover-wrapper">
              <el-icon class="avatar-icon avatar-zoomin-icon">
                <ZoomIn />
              </el-icon>
              <el-icon
                class="avatar-icon avatar-delete-icon"
                @click="deletePic"
              >
                <Delete />
              </el-icon>
            </span>
          </div>
          <el-upload
            ref="uploadAvatarRef"
            v-show="!(formData.pic[0] && formData.pic[0].url)"
            class="avatar-uploader"
            v-model:file-list="formData.pic"
            method="put"
            :action="uploadUrl"
            accept="image/bmp,image/gif,image/vnd.microsoft.icon,image/jpeg,image/webp"
            :http-request="axiosUpload"
            :show-file-list="false"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :on-change="avatarFileChange"
            :before-upload="beforeImageUpload"
          >
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="地区标签" prop="region">
          <dictionary v-model="formData.region" type-code="region" />
        </el-form-item>

        <el-form-item label="国家/地区" prop="nativeList">
          <el-select
            v-model="formData.nativeList"
            multiple
            collapse-tags
            placeholder="选择国家/地区"
            style="width: 240px"
          >
            <el-option
              v-for="item in country"
              :key="item.id"
              :label="item.Chinese"
              :value="item.Chinese"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出生地" prop="birthPlace">
          <el-input v-model="formData.birthPlace" placeholder="请输入出生地" />
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="formData.birthday"
            type="date"
            placeholder="请选择出生日期"
            :size="'default'"
          />
        </el-form-item>

        <el-form-item label="身高" prop="height">
          <el-input
            type="number"
            v-model="formData.height"
            placeholder="请输入身高"
          />
        </el-form-item>

        <el-form-item label="体重" prop="weight">
          <el-input
            type="number"
            v-model="formData.weight"
            placeholder="请输入体重"
          />
        </el-form-item>

        <el-form-item label="血型" prop="blood">
          <!-- <el-input v-model="formData.blood" placeholder="请输入血型" /> -->
          <dictionary v-model="formData.blood" type-code="blood" />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <dictionary v-model="formData.gender" type-code="gender" />
        </el-form-item>

        <el-form-item label="照片墙" prop="pictorialList" :required="false">
          <el-upload
            v-model:file-list="formData.pictorialList"
            method="put"
            :action="uploadUrl"
            list-type="picture-card"
            accept="image/bmp,image/gif,image/vnd.microsoft.icon,image/jpeg,image/webp"
            crossorigin="anonymous"
            :on-preview="handlePictureCardPreview"
            :auto-upload="false"
            :on-remove="removePictorialList"
            :http-request="axiosUpload"
            :on-change="pictorialFileChange"
            :on-success="handlePictorialSuccess"
            :before-upload="beforeImageUpload"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="介绍" prop="introduce">
          <el-input
            type="textarea"
            v-model="formData.introduce"
            placeholder="请输入歌手介绍"
            rows="6"
            autosize
          />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 歌手导入表单 -->
      <el-form
        v-else-if="dialog.type === 'artist-import'"
        :model="importData"
        label-width="100px"
      >
        <el-form-item label="Excel文件">
          <el-upload
            ref="uploadRef"
            action=""
            drag
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :limit="1"
            :auto-upload="false"
            :file-list="importData.fileList"
            :on-change="handleFileChange"
            :on-exceed="handleFileExceed"
          >
            <el-icon>
              <Plus />
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div>xls/xlsx files</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.avatar {
  display: block;
  width: 178px;
  height: 178px;
  object-fit: scale-down;
}

.avatar-cover-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  // cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // pointer-events: none;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background-color: var(--el-overlay-color-lighter);
  opacity: 0;
  transition: opacity var(--el-transition-duration);

  .avatar-icon {
    font-size: 20px;
  }

  .avatar-zoomin-icon {
    margin-right: 15px;
  }
}

.avatar-delete-wrapper {
  position: relative;
  border: 1px dashed gray;

  &:hover {
    .avatar-cover-wrapper {
      opacity: 1;
    }
  }
}
</style>

<style lang="scss">
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
